<!-- 客户管理 -->
<template>
  <div class="customer-man">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="20">
        <el-form v-model="formData" size="mini" :inline="true" class="demo-form-inline">
          <el-form-item label="客户名称" label-width="70px">
            <el-input v-model="formData.motorcadeName" @keyup.enter.native="getTabeDate(1, 15)"></el-input>
          </el-form-item>
          <el-form-item label="公司联系人" label-width="90px">
            <el-input v-model="formData.fullName" @keyup.enter.native="getTabeDate(1, 15)"></el-input>
          </el-form-item>
          <el-form-item label="操作员" label-width="60px">
            <el-select filterable v-model="formData.salesmanId" placeholder="请选择操作员">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="item in salesmanList" :key="item.id" :label="item.fullName" :value="item.salesmanId"></el-option>
              </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <div style="display: flex; justify-content: flex-end; height: 29px;">
          <el-button type="primary" size="mini" @click="getTabeDate(1, 15)">搜索</el-button>
          <el-button size="mini" @click="clearInfo">清空</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 操作 -->
    <el-row>
      <el-form size="mini" :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button size="mini" @click="newTeam">新增车队</el-button>
          <el-button size="mini" @click="newBoxman">添加用箱人</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      border
      :data="tableData"
      style="width: 100%; overflow-x: auto;">
      <el-table-column
        align="center"
        width="150px"
        :show-overflow-tooltip="true"
        label="公司全称">
        <template slot-scope="scope">
          {{scope.row.CompanyName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="100px"
        label="手机号">
        <template slot-scope="scope">
          {{scope.row.Mobile1}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="110px"
        label="账号">
        <template slot-scope="scope">
          {{scope.row.NickName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="联系人">
        <template slot-scope="scope">
          {{scope.row.linkMan}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作员">
        <template slot-scope="scope">
          {{scope.row.salesmanName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="200"
        :show-overflow-tooltip="true"
        label="公司地址">
        <template slot-scope="scope">
          {{scope.row.Address}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :show-overflow-tooltip="true"
        label="客户名称">
        <template slot-scope="scope">
          {{scope.row.FullName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="100px"
        label="联系电话">
        <template slot-scope="scope">
          {{scope.row.Phone1}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :show-overflow-tooltip="true"
        label="QQ">
        <template slot-scope="scope">
          {{scope.row.QQ}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="传真">
        <template slot-scope="scope">
          {{scope.row.fax}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        label="上港代码">
        <template slot-scope="scope">
          {{scope.row.protocolCode}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="助记码">
        <template slot-scope="scope">
          {{scope.row.ZJM}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button size="mini" @click="editBoxman(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="isSure(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="salesman-man-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[15, 20, 30]"
        :page-size="number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <new-team-dialog></new-team-dialog>
    <new-boxman-dialog :salesmanList="salesmanList" :uploadimgData="uploadData"></new-boxman-dialog>
    <modify-customer-dialog :salesmanList="salesmanList" :editObj="editObj"></modify-customer-dialog>
    <!-- <new-customer-dialog @addCustomeManp="addCustomeMan"></new-customer-dialog> -->
  </div>
</template>

<script>
import NewTeamDialog from './dialog/NewTeamDialog.vue'
import NewBoxmanDialog from './dialog/NewBoxmanDialog.vue'
import NewCustomerDialog from './dialog/NewCustomerDialog.vue'
import ModifyCustomerDialog from './dialog/ModifyCustomerDialog.vue'
import { SearchUserInfo, deletecarManagerInfo } from './api/customerManagement'
import {
  getSalesman
} from '../userMan/api/userman.js'
import util from '@util'
export default {
  components: {
    NewTeamDialog,
    NewCustomerDialog,
    NewBoxmanDialog,
    ModifyCustomerDialog
  },
  data () {
    return {
      tableData: [],
      salesmanList: [],
      uploadData: {},
      editObj: '',
      loading: true,
      pageNo: 1,
      number: 15,
      total: 0,
      formData: {
        motorcadeName: '',
        fullName: '',
        salesmanId: ''
      }
    }
  },
  mounted () {
    const user = util.getItem('$user_fx')
    Object.assign(this.uploadData, {
      un: user.un,
      rtk: user.rtk,
      uid: user.uid,
      image: ''
    })
    this.getTabeDate(1, 15)
    this.getSalesmanList()
  },
  methods: {
    newTeam () {
      this.$store.commit('show_new_team_dialog')
    },
    newBoxman () {
      this.$store.commit('show_new_boxman_dialog')
    },
    newCustomer () {
      this.$store.commit('show_new_customer_dialog')
    },
    editBoxman (row) {
      this.editObj = JSON.stringify(row)
      this.$store.commit('show_modify_customer_dialog')
    },
    // 封装的调用父组件方法
    parentName () {
      this.getTabeDate(this.pageNo, this.number)
    },
    // 获取表格数据
    async getTabeDate (pg, nb) {
      this.loading = true
      const res = await SearchUserInfo({
        motorcadeName: this.formData.motorcadeName,
        fullName: this.formData.fullName,
        salesmanId: this.formData.salesmanId,
        state: 1,
        page: pg,
        num: nb
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.dataCount
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    isSure (row) {
      this.$confirm(' 是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteBoxman(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
        return false
      })
    },
    // 删除用箱人
    async deleteBoxman (row) {
      const res = await deletecarManagerInfo({
        customerId: row.UserId
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.getTabeDate(1, 15)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    clearInfo () {
      this.formData.motorcadeName = ''
      this.formData.fullName = ''
      this.formData.salesmanId = ''
    },
    handleCurrentChange (val) {
      this.getTabeDate(val, this.number)
      this.pageNo = val
    },
    // 获取业务员列表
    async getSalesmanList () {
      const res = await getSalesman({
        nickName: '',
        state: 1,
        userType: 8,
        page: 1,
        num: 10000
      })
      if (res.status === 200) {
        this.salesmanList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 每页条数
    handleSizeChange (val) {
      this.getTabeDate(this.pageNo, val)
      this.number = val
    }
  }
}
</script>

<style lang="less">
  .fitler{
    .el-tag{
      cursor: pointer;
    }
  }
  .salesman-man-pagination {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
</style>
